import { PackageManagerTabs, Steps } from '@theme';

# Expo Modules

The [Expo Modules](https://docs.expo.dev/modules/overview/) is a popular solution for writing native modules and views in Swift and Kotlin for React Native apps. It provides a modern, consistent API across platforms with minimal boilerplate and full support for React Native's New Architecture, while maintaining backwards compatibility.

Using Expo Modules with Re.Pack requires some setup - this guide will show you how to get started with Expo Modules in your project.

## Installation

:::info
Skip the ["Configure Expo CLI for bundling"](https://docs.expo.dev/bare/installing-expo-modules/#configure-expo-cli-for-bundling-on-android-and-ios) section, as Re.Pack handles the bundling process.
:::

### 1. Install Expo package

Install the Expo package in your project:

<PackageManagerTabs command="install expo" />

### 2. Modify Native Platform files

Follow these steps from the official Expo guide:

1. [Configuration for Android](https://docs.expo.dev/bare/installing-expo-modules/#configuration-for-android)
2. [Configuration for iOS](https://docs.expo.dev/bare/installing-expo-modules/#configuration-for-ios)

### 3. Add Re.Pack Integration

First, install the official Re.Pack Expo Modules plugin:

<PackageManagerTabs command="install -D @callstack/repack-plugin-expo-modules" />

Then, add the plugin to your configuration file:

```js title=rspack.config.cjs
const { ExpoModulesPlugin } = require("@callstack/repack-plugin-expo-modules");

module.exports = {
  plugins: [
    new ExpoModulesPlugin(),
  ]
};
```

## Usage

After completing the setup, you can start using Expo modules in your application. 

:::tip
For specific module installation and usage instructions, refer to the [Expo documentation](https://docs.expo.dev/versions/latest/).
:::

### Verifying installation

You can verify that the installation was successful by logging a value from `expo-constants`.

First, install the `expo-constants` package:

<PackageManagerTabs command="install expo-constants" />

Then, add the following code to your `index.js` file:

```js title=index.js
import Constants from 'expo-constants';

console.log(Constants.expoConfig);
```

You should see the `expoConfig` object in the console (in React Native Dev Tools).



